<template>
	<view class="page" :style="{'min-height':h+'px'}">
		<!-- 头部 -->
		<u-navbar title="在线预约" :autoBack="true" :leftIconSize="36" bgColor="#ffffff" leftIconColor="#111111"
			:titleStyle="titleStyle"></u-navbar>
		<view class="content" :style="{'margin-top':mt+'px'}">


			<view class="c_booking">
				<view class="cb_fw">
					<text>预约服务</text>
					<text>{{object.thingName}}</text>
				</view>
				<view class="cb_qm">
					<view class="cbq_l">
						<text>预约券码张数</text>
						<text>商家核销后，券码才会失效</text>
					</view>
					<view class="cbq_r">
						<image src="@/static/index/steamerTicket/img_reduce.jpg" @tap="reduceNum"></image>
						<text>{{object.num}}</text>
						<image src="https://i.ringzle.com/file/20240306/430c33a8b02f4271b386c9278bf41f44.png"
							@tap="increaseNum"></image>
					</view>
				</view>




				<view class="cb_info">
					<view class="cbi_title">
						<text>预约人信息</text>
						<text>选择常用联系人</text>
					</view>
					<view class="cbi_item">
						<text>联系人</text>
						<input type="text" placeholder="请填写联系人信息" v-model="dto.userName" @blur="setContactName"
							@confirm="setContactName">
					</view>
					<view class="cbi_item">
						<text>手机号</text>
						<input type="phone" placeholder="请填写手机号" v-model="dto.userPhone" @blur="setContactPhone"
							@confirm="setContactPhone">
					</view>
				</view>
			</view>

			<view class="passenger">
				<text>添加游客 <text
						style="font-size: 24rpx ; color: #999999; margin: 0 20rpx;">单笔订单最多可添加{{NumList}}人</text></text>
				<view class="p_add" @tap="toAddPassenger">
					<image src="https://i.ringzle.com/file/20240304/3a9aa909739749a4ac35a8e95ab05d9d.png" mode="">
					</image>
					<text>添加游客</text>
				</view>
				<view class="passengers">
					<view v-for="(item,index) in passengerList" :key="index">
						<image class="p_del" src="@/static/index/steamerTicket/icon_delete.jpg"
							@tap="delPassenger(item,index)"></image>
						<view class="p_info">
							<view class="pi_top">
								<view class="name">
									<text>{{item.name}}</text>
									<!-- <view>{{item.personType}}</view> -->
								</view>
								<image src="@/static/my/commonInformation/icon_edit.png" mode=""
									@tap="editPassenger(item,index)"></image>
							</view>
							<view class="pi_idcard">
								身份证号： <span>{{item.card}}</span>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="c_merchant">
				<view class="cm_title">
					<text>商家信息</text>
					<view class="cmt_r" @tap="infoShow=true">
						<text>{{object.fishermanName}}</text>
						<image src="@/static/index/steamerTicket/icon_yjt.png"></image>
					</view>
				</view>
				<view class="cm_time">
					<text class="cmt_title">游玩时间</text>
					<view class="cmt_date">
						<u-scroll-list :indicator="false">
							<view class="cd_item" v-for="(item,index) in dateList" :key="index"
								:class="didx===index?'active':''" @tap="changeDate(item,index)">
								<text>{{item.week}}</text>
								<text>{{item.dateYr}}</text>
							</view>
						</u-scroll-list>
					</view>
					<view class="cmt_time">
						<view v-for="(item,index) in timeList" :key="index"
							:class="tidx===index?'active':(item.state==0?'yueman':'')" @tap="changeTime(item,index)">
							<!-- :class="tidx===index?'active':''"@tap="changeTime(item,index)"> -->
							<text>{{item.configTime}}</text>
							<text>{{item.state==1?'可约':'约满'}}</text>
							<image v-if="tidx===index"
								src="https://i.ringzle.com/file/20240306/8e3c548cbaca441db95541e57ca07767.png"></image>
						</view>
					</view>
				</view>

				<view class="cm_memo">
					<text>备注</text>
					<input type="text" placeholder="选填，可输入您的其他需求" v-model="dto.notes" @blur="setMemo"
						@confirm="setMemo">
				</view>
			</view>

			<view class="c_btn">
				<view class="cb_btn" @tap="toBooking">立即预约</view>
			</view>
		</view>
		<u-popup :show="infoShow" @close="infoShow=false">
			<view class="details">
				<view class="title">
					<text>商家信息</text>
					<image src="@/static/index/steamerTicket/icon_close.png" @tap="infoShow=false"></image>
				</view>
				<view class="d_content">
					<text>商家名称 {{object.fishermanName}}</text>
					<text>商家地址 {{object.address}}</text>
					<text>商家资质 </text>
					<image :src="merchantInfo.img"></image>
				</view>
			</view>
		</u-popup>


		<!-- 添加/添加游客 -->
		<u-popup :show="addShow" @close="addShow=false">
			<view class="detailed">
				<view class="title">
					<text>添加游客</text>
					<image src="@/static/index/steamerTicket/icon_close.png" @tap="addShow=false"></image>
				</view>
				<view class="has_info">
					<view class="add_user" @tap="addPerson">
						<image src="@/static/my/commonInformation/icon_add.png" mode=""></image>
						<text>新增</text>
					</view>
					<view class="add_list" v-if="addList.length>0">
						<u-swipe-action>
							<u-swipe-action-item :options="options" v-for="(item, index) in addList" :key="index"
								@click="deletePerson(item)" :ref="'swipeAction' + index" v-if="item.name">
								<view class="swipe-action u-border-top u-border-bottom">
									<view class="swipe-action__content">
										<view class="sac_item">
											<image class="chk" @tap="selectPerson(index,item)"
												:src="item.isSelect?'https://i.ringzle.com/file/20240301/4669376abd424e6aaf24bc953a19e43b.png':'https://i.ringzle.com/file/20231027/db588133d67548fc82dfb0d128eac9a8.png'">
											</image>
											<view class="si_info">
												<view class="name">
													<view>{{item.name}}</view>
													<view>{{typeCfg[item.personType]}}</view>
												</view>
												<view class="idcard">
													<text>{{cardCfg[item.cardType]}}</text>
													<text>{{item.card}}</text>
												</view>
											</view>
											<image class="edit" src="@/static/my/commonInformation/icon_edit.png"
												@tap="toEdit(item)"></image>
										</view>
									</view>
								</view>
							</u-swipe-action-item>
						</u-swipe-action>
					</view>
				</view>
				<view class="add_submit" @tap="confirmAdd">确定</view>
			</view>
		</u-popup>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#f56c6c'
					}
				}],
				h: uni.getWindowInfo().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				titleStyle: {
					fontSize: '36rpx',
					fontWeight: "bold",
					color: "#111111"
				},
				object: null,
				num: 1,
				week: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
				didx: 0,
				dateList: [],
				date: '',
				tidx: '',
				timeList: [],
				time: '',
				contactName: uni.getStorageSync('userInfo') ? JSON.parse(uni.getStorageSync('userInfo')).realName : '',
				contactPhone: uni.getStorageSync('userInfo') ? JSON.parse(uni.getStorageSync('userInfo')).mobile : '',
				memo: '',
				fileList: [],
				infoShow: false,
				merchantInfo: {
					title: '',
					address: '',
					img: 'https://i.ringzle.com/file/20231110/4be0caca8a15466293b9e63d51a188c8.png'
				},
				fromData: {
					fishermanId: '',
					configDate: '',
					configTime: ''
				},
				orderId: '',
				dto: {
					fishermanId: '',
					fishermanName: '',
					notes: '',
					useDate: '',
					useTime: '',
					num: '',
					orderId: '',
					userId: '',
					thingsId: '',
					thingsName: '',
					configId: '',
					userName: uni.getStorageSync('userInfo') ? JSON.parse(uni.getStorageSync('userInfo')).realName : '',
					userPhone: uni.getStorageSync('userInfo') ? JSON.parse(uni.getStorageSync('userInfo')).mobile : '',
					userList: [],
				},
				addShow: false,
				addList: [],
				passengerList: [],
				lsKey: '',
				passengerCarList: [],
				NumList: 1


			}
		},
		onLoad(option) {
			// 从本地缓存中获取数据

			this.object = uni.getStorageSync('listObject');
			if (this.object) {
				// this.object = JSON.parse(option.object);
				console.log('---------', this.object);
				this.fromData.fishermanId = this.object.fishermanId
				this.orderId = this.object.orderCode
				this.dto.orderId = this.object.orderCode
				this.dto.fishermanId = this.object.fishermanId
				this.dto.fishermanName = this.object.fishermanName
				this.dto.userId = this.object.userId
				this.dto.num = this.object.num
				this.dto.thingsId = this.object.thingId
				this.dto.thingsName = this.object.thingName
				this.NumList = this.object.needNum * this.object.num
			}
			this.dateInit();
			this.timeInit();
			this.getLIst()
			//获取乘客
			this.getPassengers();
		},
		methods: {
			delPassenger(item, index) {
				this.passengerList.splice(index, 1);
				this.dto.userList.splice(index, 1);
			},

			//获取乘客
			getPassengers() {
				this.lsKey = 'getPassenger';
				this.$login().then(res => {
					if (res === 0) this.toGetPassengers();
					else this.$refs['phoneNumber'].show = true;
				})
			},
			toGetPassengers(callback) {
				this.$api.get('/api/commonPerson/list', {
					openId: JSON.parse(uni.getStorageSync('userInfo')).openId
				}).then(res => {
					if (res.data.code === 0) {
						this.addList = this.$uct.setPersonType(res.data.data);
						this.addList.forEach((d, i) => {
							this.$set(this.addList[i], 'isSelect', false);
						})
						callback && callback()
					} else this.$showModal(res.data.msg);
				})
			},
			confirmAdd() {
				this.passengerList = this.addList.filter(d => d.isSelect == true);
				if (this.passengerList.length == 0) return this.$showToast('请至少添加一名乘客');

				this.passengerList.forEach((d, i) => {
					this.$set(this.passengerList[i], 'childs', 0);
					console.log('请至少添加一名乘客', d, i);
					this.addShow = false;
					this.dto.userList.push({
						name: d.name,
						idCode: d.card
					})
				})
			},
			toEdit(item) {
				uni.navigateTo({
					url: '/pagesMy/commonInformation/add?type=ship&item=' + JSON.stringify(item),
					events: {
						editPassengerSuccess: data => {
							this.toGetPassengers();
						}
					}
				})
			},
			// 删除
			editPassenger(item, index) {
				uni.navigateTo({
					url: '/pagesMy/commonInformation/add?type=ship&item=' + JSON.stringify(item),
					events: {
						editPassengerSuccess: data => {
							this.toGetPassengers(() => {
								this.passengerList[index] = this.addList.find(d => d.id == item
									.id);
								this.$set(this.passengerList[index], 'childs', 0);
							});
						}
					}
				})
			},
			//选择乘客
			selectPerson(index, item) {
				console.log('选择乘客', index, item);
				this.$set(this.addList[index], 'isSelect', !this.addList[index].isSelect);
			},
			deletePerson(item) {
				this.$api.del('/api/commonPerson', [item.id]).then(res => {
					if (res.data.code === 0) {
						this.addList.forEach((d, i) => {
							this.$refs['swipeAction' + i][0].closeHandler();
						})
						this.toGetPassengers();
						let fidx = this.passengerList.findIndex(d => d.id == item.id);
						if (fidx > -1) this.passengerList.splice(fidx, 1);
					} else this.$showModal(res.data.msg)
				})
			},
			addPerson() {
				this.$login().then(res => {
					if (res === 0) {
						uni.navigateTo({
							url: '/pagesMy/commonInformation/add?type=ship',
							events: {
								addPassengerSuccess: data => {
									this.toGetPassengers();
								}
							}
						})
					} else this.$refs['phoneNumber'].show = true;
				})
			},
			toAddPassenger() {
				if (this.NumList > this.passengerList.length) {
					this.addShow = true;
					this.addList.forEach((d, i) => {
						if (this.passengerCarList.find(p => p.idcard == d.card))
							this.$set(this.addList[i], 'isDriver', true);
						else this.$set(this.addList[i], 'isDriver', false);
						if (this.passengerList.find(p => p.card == d.card))
							this.$set(this.addList[i], 'isSelect', true);
						else this.$set(this.addList[i], 'isSelect', false);
					})
				} else this.$showToast(`单笔订单最多可添加${this.NumList}人`);


			},



			dateInit() {
				this.dateList = [];
				for (let i = 0; i < 31; i++) {
					this.dateList.push({
						date: new Date(new Date().setDate(new Date().getDate() + i)).Format(
							'yyyy-MM-dd hh:mm:ss'),

						week: i === 0 ? '今天' : (this.week[new Date(new Date().setDate(new Date()
							.getDate() + i)).getDay()]),
						dateYr: new Date(new Date().setDate(new Date().getDate() + i)).Format('MM-dd'),
					})
				}
				this.date = this.dateList[0].date;
				this.fromData.configDate = this.date.slice(0, -9)
				this.dto.useDate = this.date.slice(0, -9)
			},
			timeInit() {
				this.timeList = [];
				for (let i = 0; i < 8; i++) {
					this.timeList.push({
						time: (10 + i) + ':00',
						keyue: (i.maxNum >= i.nowNum) ? false : true
					})
				}
				this.time = this.timeList[0].time;
			},
			// 预约日期
			changeDate(item, index) {
				this.date = item.date;
				this.dto.useDate = item.date.slice(0, -9)
				this.fromData.configDate = item.date.slice(0, -9)
				this.didx = index;
				this.tidx = '';
				this.time = '';
				this.getLIst()
			},
			// 预约时间
			changeTime(item, index) {
				console.log(item);
				// if (!item.keyue) return
				// this.dto.c = item.configTime

				this.dto.useTime = item.configTime
				this.dto.configId = item.id;
				// this.dto.useTime = item.configTime
				this.tidx = index;
			},

			// 预约时间段接口
			getLIst() {

				this.$api.get('/api/fishermanconfig/list', this.fromData).then(res => {
					this.timeList = res.data.data
				})
			},
			// 立即预约
			toBooking() {
				if (this.dto.useTime == '') return this.$showToast('请选择游玩时间');
				if (!this.$reg.mobile(this.dto.userPhone)) return this.$showToast('请填写正确的手机号');
				this.$api.post('/api/fishermanreservation', this.dto).then(res => {
					if (res.data.code == 0) {
						uni.navigateTo({
							url: `/pagesMy/FishJialeList/subscribeDetails?latitude=${res.data.data.latitude}&longitude=${res.data.data.longitude}`
						})
					} else this.$showModal(res.data.msg);
				})

			}
		}
	}
</script>
<style lang="scss">
	.passenger {
		padding: 40rpx 24rpx;
		background: #fff;
		border-radius: 16rpx;

		&>text {
			font-size: 32rpx;
			font-family: PingFang-SC-Bold, PingFang-SC;
			font-weight: bold;
			color: #111111;
		}

		.p_add {
			margin-top: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			// border-radius: 16rpx;
			// border: 1rpx dotted #007A69;
			background-image: url('https://i.ringzle.com/file/20240306/a9c7c82c48b4436daa030a266ea763c9.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			padding: 16rpx;

			image {
				width: 20rpx;
				height: 20rpx;
			}

			text {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #007A69;
				margin-left: 8rpx;
			}
		}
	}

	.contacts {
		margin-top: 20rpx;

		.c_info {
			padding: 40rpx 24rpx 28rpx;
			background: #fff;
			border-radius: 16rpx;

			&>text {
				font-size: 32rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #111111;
			}

			.ci_inp {
				display: flex;
				align-items: center;
				justify-content: space-between;

				&.mt48 {
					margin-top: 48rpx;
				}

				text {
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #111111;
				}

				input {
					border: none;
					outline: none;
					text-align: right;

					&::placeholder {
						font-size: 26rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #AAAAAA;
					}
				}
			}

			.ci_line {
				height: 1rpx;
				background: #EFEFEF;
				margin: 28rpx 0;
			}
		}

		.c_memo {
			background: #FFF9F4;
			border-radius: 0rpx 0rpx 16rpx 16rpx;
			padding: 24rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FF7D01;
		}
	}

	.ci_inp_btn {
		margin-top: 20rpx;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 98rpx;
		border-radius: 16rpx;
		padding: 0 16rpx;

		&.mt48 {
			margin-top: 48rpx;
		}

		text {
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #111111;
		}

		input {
			border: none;
			outline: none;
			text-align: right;

			&::placeholder {
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #AAAAAA;
			}
		}
	}

	.agree {
		box-sizing: border-box;
		// margin: 24rpx 36rpx;
		display: flex;
		align-items: center;
		padding: 51rpx 0 51rpx;

		image {
			width: 32rpx;
			height: 32rpx;
			margin-right: 16rpx;
		}

		text {
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
		}

		text:nth-child(3) {
			color: #007A69;
			margin-left: 10rpx;
		}
	}


	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: calc(100% - 60rpx);
		background: #fff;
		box-shadow: 0rpx -1rpx 8rpx 0rpx rgba(0, 0, 0, 0.06);
		padding: 16rpx 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 9;

		.b_left {
			display: flex;
			align-items: center;

			&>text {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
			}

			&>view {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FF4141;
				margin-left: 16rpx;

				span {
					font-size: 48rpx;
					font-family: DINAlternate-Bold, DINAlternate;
					font-weight: bold;
					color: #FF4141;
				}
			}
		}

		.b_right {
			display: flex;
			align-items: center;

			.br_left {
				display: flex;
				align-items: center;

				text {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
				}

				image {
					width: 24rpx;
					height: 24rpx;
					margin-left: 8rpx;
				}
			}

			.br_right {
				width: 220rpx;
				height: 80rpx;
				background: #007A69;
				border-radius: 40rpx;
				line-height: 80rpx;
				text-align: center;
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				margin-left: 24rpx;
			}
		}
	}

	.detailed {
		padding: 40rpx 30rpx 200rpx;
		min-height: 400rpx;
		// height: 70vh;

		.title {
			position: relative;
			text-align: center;

			text {
				font-size: 36rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #333333;
			}

			image {
				width: 36rpx;
				height: 36rpx;
				position: absolute;
				right: 10rpx;
				top: 50%;
				margin-top: -18rpx;
			}
		}

		.address {
			font-size: 32rpx;
			font-family: PingFang-SC-Bold, PingFang-SC;
			font-weight: bold;
			color: #333333;
			margin-top: 48rpx;
		}

		.tickets {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 42rpx;

			&>text {
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #777777;
			}

			&>view {
				font-size: 28rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #333333;

				span {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #777777;
				}
			}
		}

		.total {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 61rpx;

			text {
				font-size: 32rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #333333;
			}

			view {
				height: 36rpx;
				font-size: 32rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #333333;
			}
		}

		.d_middle {
			padding: 40rpx 0 150rpx;

			&>view {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 40rpx 0;

				&:first-child {
					border-bottom: 1rpx solid #EFEFEF;
				}

				&>text {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}

				&>view {
					font-size: 30rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #333333;
					display: flex;
					align-items: center;

					span {
						font-size: 26rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #777777;
						margin-left: 10rpx;
					}
				}
			}
		}

		&.details_pay {
			background: #F6F6F6;

			.wechat_pay {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 83rpx;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 0rpx 0rpx;
				padding: 41rpx 24rpx;

				.wp_left {
					display: flex;
					align-items: center;

					image {
						width: 54rpx;
						height: 54rpx;
					}

					text {
						font-size: 32rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						margin-left: 24rpx;
					}
				}

				&>image {
					width: 48rpx;
					height: 48rpx;
				}
			}

			.pay_submit {
				margin-top: 59rpx;
				height: 92rpx;
				background: #007A69;
				border-radius: 46rpx;
				line-height: 92rpx;
				text-align: center;
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				letter-spacing: 2rpx;
			}
		}

		.has_info {
			.add_user {
				height: 88rpx;
				border-radius: 16rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background: #fff;
				margin-top: 48rpx;
				border: 1rpx dotted #007A69;

				image {
					width: 30rpx;
					height: 30rpx;
					margin-right: 12rpx;
				}

				text {
					font-size: 32rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #007A69;
					margin-left: 12rpx;
					letter-spacing: 2rpx;
				}
			}

			.add_list {
				padding-top: 30rpx;

				.sac_item {
					display: flex;
					align-items: center;
					padding: 36rpx 24rpx;

					.chk {
						width: 38rpx;
						height: 38rpx;
					}

					.si_info {
						width: calc(100% - 96rpx);
						padding-left: 22rpx;

						.name {
							display: flex;
							align-items: center;

							view:first-child {
								font-size: 32rpx;
								font-family: PingFang-SC-Bold, PingFang-SC;
								font-weight: bold;
								color: #111111;
								line-height: 32rpx;
							}

							view:last-child {
								padding: 6rpx 8rpx;
								line-height: 24rpx;
								text-align: center;
								background: #F5F8FA;
								border-radius: 8rpx;
								font-size: 24rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #94A9C8;
								margin: 5rpx 0 0 28rpx;
							}
						}

						.idcard {
							margin-top: 20rpx;

							&>text {
								font-size: 24rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #111111;
								line-height: 24rpx;

								&:first-child {
									color: #AAAAAA;
									margin-right: 10rpx;
								}
							}
						}
					}

					.edit {
						width: 36rpx;
						height: 36rpx;
					}
				}
			}
		}

		.add_submit {
			width: calc(100% - 60rpx);
			height: 88rpx;
			background: #007A69;
			border-radius: 44rpx;
			position: fixed;
			bottom: 69rpx;
			font-size: 32rpx;
			font-family: PingFang-SC-Bold, PingFang-SC;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 88rpx;
			text-align: center;
		}
	}

	.passengers {
		&>view {
			display: flex;
			justify-content: space-between;
			margin-top: 43rpx;

			.p_del {
				width: 43rpx;
				height: 36rpx;
			}

			.p_index {
				width: 100rpx;
				height: 60rpx;
				margin: 0 30rpx;
			}

			.p_info {
				width: calc(100% - 48rpx);
				padding-left: 24rpx;

				.pi_top {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.name {
						display: flex;
						align-items: center;

						text {
							font-size: 30rpx;
							font-family: PingFang-SC-Bold, PingFang-SC;
							font-weight: bold;
							color: #333333;
						}

						view {
							width: 88rpx;
							height: 36rpx;
							background: #F5F8FA;
							border-radius: 8rpx;
							line-height: 36rpx;
							text-align: center;
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #94A9C8;
							margin-left: 22rpx;
						}
					}

					image {
						width: 36rpx;
						height: 36rpx;
					}
				}

				.pi_idcard {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					margin-top: 16rpx;

					span {
						margin-left: 10rpx;
					}
				}

				.pi_bottom {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 14rpx;

					.pib_left {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
					}

					.pib_right {
						display: flex;
						align-items: center;

						image {
							width: 40rpx;
							height: 40rpx;
						}

						.pibr_text {
							height: 40rpx;
							line-height: 40rpx;
							padding: 0 26rpx;
							font-size: 28rpx;
							font-family: PingFang-SC-Bold, PingFang-SC;
							font-weight: bold;
							color: #CCCCCC;
						}
					}
				}
			}
		}
	}
</style>

<style scoped lang="less">
	/deep/.u-upload,
	/deep/.u-upload__wrap,
	/deep/.u-upload__wrap>view {
		width: 100%;
		height: 100%;
	}

	/deep/.u-popup__content,
	/deep/.u-popup__content .details {
		border-radius: 24rpx 24rpx 0rpx 0rpx !important;
	}

	.page {
		.content {
			.c_booking {
				width: 100%;
				padding: 0 24rpx;
				box-sizing: border-box;

				&>view {
					display: flex;
					justify-content: space-between;
				}

				.cb_fw {
					align-items: center;
					padding: 28rpx 0;

					text {
						font-size: 30rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;

						&:first-child {
							color: #777777;
						}

						&:last-child {
							color: #111111;
						}
					}
				}

				.cb_qm {
					padding: 29rpx 0 37rpx;
					border-top: 1rpx solid rgba(112, 112, 112, .1);

					.cbq_l {
						display: flex;
						flex-direction: column;

						text {
							font-size: 30rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #777777;

							&:last-child {
								font-size: 24rpx;
								color: #999999;
								margin-top: 18rpx;
							}
						}
					}

					.cbq_r {
						display: flex;
						align-items: center;

						image {
							width: 44rpx;
							height: 44rpx;
						}

						text {
							font-size: 28rpx;
							font-family: PingFang-SC-Bold, PingFang-SC;
							font-weight: bold;
							color: #333333;
							padding: 0 30rpx;
						}
					}
				}

				.cb_info {
					flex-direction: column;
					justify-content: inherit;
					padding-top: 39rpx;
					border-top: 1rpx solid rgba(112, 112, 112, .1);

					&>view {
						display: flex;
						align-items: center;
						justify-content: space-between;
					}

					.cbi_title {
						padding-bottom: 9rpx;

						text {
							font-size: 32rpx;
							font-family: PingFang-SC-Bold, PingFang-SC;
							font-weight: bold;
							color: #333333;

							&:last-child {
								font-size: 24rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #FF7D01;
							}
						}
					}

					.cbi_item {
						padding: 28rpx 0;

						&:last-child {
							border-top: 1rpx solid rgba(112, 112, 112, .1);
						}

						text {
							font-size: 26rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #777777;
						}

						input {
							border: none;
							outline: none;
							text-align: right;
							font-size: 26rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #777777;

							&::placeholder {
								color: #AAAAAA;
							}
						}
					}
				}
			}

			.c_merchant {
				width: 100%;
				padding: 0 24rpx;
				box-sizing: border-box;
				border-top: 20rpx solid #F5F8FA;

				.cm_title {
					padding: 28rpx 0;
					display: flex;
					align-items: center;
					justify-content: space-between;

					&>text {
						font-size: 26rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #777777;
					}

					.cmt_r {
						display: flex;
						align-items: center;

						text {
							font-size: 26rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #333333;
						}

						image {
							width: 24rpx;
							height: 24rpx;
							margin-left: 10rpx;
						}
					}
				}

				.cm_time {
					padding-top: 40rpx;
					border-top: 1rpx solid rgba(112, 112, 112, .1);

					.cmt_title {
						font-size: 32rpx;
						font-family: PingFang-SC-Bold, PingFang-SC;
						font-weight: bold;
						color: #333333;
					}

					.cmt_date {
						display: flex;
						align-items: center;
						width: 100%;
						overflow-x: auto;
						padding-top: 40rpx;

						.cd_item {
							width: 146rpx;
							position: relative;
							padding-bottom: 30rpx;
							display: flex;
							flex-direction: column;
							align-items: center;

							&:first-child {
								margin-left: -20rpx;
							}

							text {
								font-size: 30rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #666666;

								&:last-child {
									font-size: 24rpx;
									color: #646464;
									margin-top: 4rpx;
								}
							}

							&.active {
								text {
									&:first-child {
										font-size: 30rpx;
										font-family: PingFang-SC-Bold, PingFang-SC;
										font-weight: bold;
										color: #333333;
									}
								}

								&::after {
									content: '';
									width: 64rpx;
									height: 6rpx;
									background: #007A69;
									border-radius: 5rpx;
									position: absolute;
									left: 50%;
									margin-left: -32rpx;
									bottom: 2rpx;
								}
							}
						}
					}

					.cmt_time {
						padding: 9rpx 26rpx 0;
						display: flex;
						flex-wrap: wrap;
						// justify-content: end;
						border-top: 1rpx solid rgba(112, 112, 112, .1);

						&>view {
							width: calc(33% - 30rpx);
							height: 110rpx;
							border-radius: 15rpx;
							border: 1rpx solid #E1E1E1;
							margin-top: 20rpx;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;
							position: relative;
							margin: 20rpx 14rpx 20rpx;

							text {
								font-size: 26rpx;
								font-family: PingFang-SC-Bold, PingFang-SC;
								font-weight: bold;
								color: #333333;

								&:last-child {
									font-size: 20rpx;
									font-family: PingFangSC-Regular, PingFang SC;
									font-weight: 400;
									margin-top: 7rpx;
								}
							}

							&.yueman {
								text {
									color: #AAAAAA;
								}
							}

							&.active {
								background: #F3FCFF;
								border: 1rpx solid #007A69;

								text {
									color: #007A69 !important;
								}
							}

							image {
								width: 34rpx;
								height: 26rpx;
								position: absolute;
								right: 0;
								bottom: 0;
							}
						}
					}
				}

				.cm_upload {
					margin-top: 48rpx;

					.cmu_title {
						display: flex;
						align-items: center;

						text {
							font-size: 32rpx;
							font-family: PingFang-SC-Bold, PingFang-SC;
							font-weight: bold;
							color: #111111;

							&:last-child {
								font-size: 24rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #999999;
								margin-left: 6rpx;
							}
						}
					}

					.cmu_sczj {
						margin-top: 40rpx;
						width: 100%;
						height: 180rpx;
						border-radius: 16rpx;
						border: 1rpx dotted #007A69;

						.cs_sc {
							width: 100%;
							height: 100%;
							display: flex;
							align-items: center;
							flex-direction: column;
							justify-content: center;

							text {
								font-size: 24rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #007A69;
								margin-top: 20rpx;
							}
						}
					}
				}

				.cm_memo {
					margin-top: 63rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					text {
						font-size: 32rpx;
						font-family: PingFang-SC-Bold, PingFang-SC;
						font-weight: bold;
						color: #333333;
					}

					input {
						width: calc(100% - 80rpx);
						border: none;
						outline: none;
						text-align: right;
						font-size: 26rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #33333;

						&::placeholder {
							color: #AAAAAA;
						}
					}
				}
			}

			.c_btn {
				margin-top: 26rpx;
				border-top: 1rpx solid rgba(112, 112, 112, .1);
				width: 100%;
				padding: 67rpx 24rpx 34rpx;
				box-sizing: border-box;

				.cb_btn {
					width: 100%;
					height: 88rpx;
					background: #007A69;
					border-radius: 44rpx;
					line-height: 88rpx;
					text-align: center;
					font-size: 32rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #FFFFFF;
					letter-spacing: 2rpx;
				}
			}
		}

		.has_info {
			.add_user {
				height: 88rpx;
				border-radius: 16rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background: #fff;
				margin-top: 48rpx;
				border: 1rpx dotted #007A69;

				image {
					width: 30rpx;
					height: 30rpx;
					margin-right: 12rpx;
				}

				text {
					font-size: 32rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #007A69;
					margin-left: 12rpx;
					letter-spacing: 2rpx;
				}
			}

			.add_list {
				padding-top: 30rpx;
				max-height: 482rpx;
				overflow-y: auto;

				.sac_item {
					display: flex;
					align-items: center;
					padding: 36rpx 24rpx;

					.chk {
						width: 38rpx;
						height: 38rpx;
					}

					.si_info {
						width: calc(100% - 96rpx);
						padding-left: 22rpx;

						.name {
							display: flex;
							align-items: center;

							view:first-child {
								font-size: 32rpx;
								font-family: PingFang-SC-Bold, PingFang-SC;
								font-weight: bold;
								color: #111111;
								line-height: 32rpx;
							}

							view:last-child {
								padding: 6rpx 8rpx;
								line-height: 24rpx;
								text-align: center;
								background: #F5F8FA;
								border-radius: 8rpx;
								font-size: 24rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #94A9C8;
								margin: 5rpx 0 0 28rpx;
							}
						}

						.idcard {
							margin-top: 20rpx;

							&>text {
								font-size: 24rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #111111;
								line-height: 24rpx;

								&:first-child {
									color: #AAAAAA;
									margin-right: 10rpx;
								}
							}
						}
					}

					.edit {
						width: 36rpx;
						height: 36rpx;
					}
				}
			}
		}

		.details {
			padding: 40rpx 30rpx 200rpx;

			.title {
				position: relative;
				text-align: center;

				text {
					font-size: 32rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}

				image {
					width: 36rpx;
					height: 36rpx;
					position: absolute;
					right: 10rpx;
					top: 50%;
					margin-top: -18rpx;
				}
			}

			.d_content {
				margin-top: 33rpx;
				display: flex;
				flex-direction: column;

				text {
					margin-top: 36rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}

				image {
					margin-top: 20rpx;
					width: 100%;
					height: 474rpx;
				}
			}
		}
	}
</style>